<template>
  <div class="ds-digital-flop2-front-flop-num">
    <div class="num-wrap">
      <div class="num" v-for="{ num, top } in list" :key="num" :style="`top: ${top}px;`">{{ num }}</div>
    </div>
    <svg
      width="88px"
      height="99.5px"
      viewBox="0 0 166 199"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      style="position: absolute; top: 0; left: 0"
    >
      <defs>
        <linearGradient x1="1.68516842%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
          <stop stop-color="#6FA0EF" stop-opacity="0.45083042" offset="0%"></stop>
          <stop stop-color="#1E44EE" stop-opacity="0.99" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="42.9664139%" x2="50%" y2="0%" id="linearGradient-2">
          <stop stop-color="#011C42" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#023EFF" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="61.759134%" y1="54.4941496%" x2="61.759134%" y2="100%" id="linearGradient-3">
          <stop stop-color="#011C42" stop-opacity="0" offset="0%"></stop>
          <stop stop-color="#023EFF" offset="100%"></stop>
        </linearGradient>
        <polygon id="path-4" points="13.8712963 24 166 24 166 142.763101 143.784969 167 -6 167 -6 45.5442359"></polygon>
        <pattern id="pattern-5" width="5" height="5" x="-11" y="19" patternUnits="userSpaceOnUse">
          <use xlink:href="#image-6" transform="scale(0.1,0.1)"></use>
        </pattern>
        <image
          id="image-6"
          width="50"
          height="50"
          xlink:href=""
        ></image>
        <polygon id="path-7" points="152.284047 0 149.333333 0 159.945881 9.82221309 159.945881 6.99436224"></polygon>
        <filter x="-42.4%" y="-45.8%" width="184.8%" height="191.6%" filterUnits="objectBoundingBox" id="filter-8">
          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
          <feColorMatrix
            values="0 0 0 0 0.97254902   0 0 0 0 0.964705882   0 0 0 0 0.380392157  0 0 0 1 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
        <polygon
          id="path-9"
          points="2.95071398 182.337017 1.2126596e-13 182.337017 10.6125474 192.15923 10.6125474 189.331379"
        ></polygon>
        <filter x="-42.4%" y="-45.8%" width="184.8%" height="191.6%" filterUnits="objectBoundingBox" id="filter-10">
          <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
          <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
          <feColorMatrix
            values="0 0 0 0 0.97254902   0 0 0 0 0.964705882   0 0 0 0 0.380392157  0 0 0 1 0"
            type="matrix"
            in="shadowBlurOuter1"
          ></feColorMatrix>
        </filter>
      </defs>
      <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polyline
          id="路径"
          stroke-opacity="0.8"
          stroke="#0076FF"
          stroke-width="2"
          opacity="0.721423921"
          points="110.213491 190.867403 25.9615274 190.867403 1.06666667 168.082866 1.06666667 1.06629834 135.466667 1.06629834 159.209906 23.0650981 159.209906 181.270718"
        ></polyline>
        <g
          id="背景"
          opacity="0.833100818"
          fill-rule="nonzero"
          transform="translate(80.000000, 95.500000) rotate(-270.000000) translate(-80.000000, -95.500000) "
        >
          <use fill-opacity="0.25" fill="url(#linearGradient-1)" xlink:href="#path-4"></use>
          <use fill-opacity="0.8" fill="url(#linearGradient-2)" xlink:href="#path-4"></use>
          <use fill-opacity="0.8" fill="url(#linearGradient-3)" xlink:href="#path-4"></use>
          <use fill="url(#pattern-5)" style="mix-blend-mode: normal" xlink:href="#path-4"></use>
        </g>
        <path
          d="M129.597273,10.5966851 L150.466667,29.7135003 L150.466667,180.270718 L32.1156068,180.270718 L9.53333333,159.498597 L9.53333333,10.5966851 L129.597273,10.5966851 Z"
          id="矩形备份-11"
          stroke-opacity="0.8"
          stroke="#0076FF"
          stroke-width="2"
          opacity="0.721423921"
        ></path>
        <rect id="矩形" fill="#2EEDFF" x="133.333333" y="0" width="2.13333333" height="2.13259669"></rect>
        <rect id="矩形备份-12" fill="#2EEDFF" x="1.2126596e-13" y="0" width="2.13333333" height="2.13259669"></rect>
        <rect
          id="矩形备份-15"
          fill="#2EEDFF"
          x="26.6666667"
          y="189.801105"
          width="2.13333333"
          height="2.13259669"
        ></rect>
        <rect id="矩形备份-22" fill="#2EEDFF" x="121.6" y="189.801105" width="2.13333333" height="2.13259669"></rect>
        <polygon
          id="矩形备份-23"
          fill="#2EEDFF"
          points="115.2 189.801105 119.466667 189.801105 119.466667 191.933702 115.2 191.933702"
        ></polygon>
        <polygon
          id="矩形备份-24"
          fill="#2EEDFF"
          points="99.2 189.801105 113.066667 189.801105 113.066667 191.933702 99.2 191.933702"
        ></polygon>
        <polygon
          id="矩形备份-17"
          fill="#2EEDFF"
          points="141.866667 189.801105 157.898016 189.801105 157.898016 179.104531 160 179.104531 160 189.801105 160 191.933702 141.866667 191.933702"
        ></polygon>
        <rect
          id="矩形备份-18"
          fill="#2EEDFF"
          x="149.333333"
          y="179.138122"
          width="2.13333333"
          height="2.13259669"
        ></rect>
        <rect
          id="矩形备份-21"
          fill="#2EEDFF"
          x="149.333333"
          y="29.8563536"
          width="2.13333333"
          height="2.13259669"
        ></rect>
        <rect id="矩形备份-19" fill="#2EEDFF" x="32" y="179.138122" width="2.13333333" height="2.13259669"></rect>
        <rect
          id="矩形备份-16"
          fill="#2EEDFF"
          x="1.2126596e-13"
          y="165.276243"
          width="2.13333333"
          height="2.13259669"
        ></rect>
        <rect
          id="矩形备份-20"
          fill="#2EEDFF"
          x="8.53333333"
          y="156.745856"
          width="2.13333333"
          height="2.13259669"
        ></rect>
        <rect
          id="矩形备份-13"
          fill="#2EEDFF"
          x="8.53333333"
          y="9.59668508"
          width="2.13333333"
          height="2.13259669"
        ></rect>
        <rect id="矩形备份-14" fill="#2EEDFF" x="128" y="9.59668508" width="2.13333333" height="2.13259669"></rect>
        <g id="路径-4">
          <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
          <use fill="#F8F661" fill-rule="evenodd" xlink:href="#path-7"></use>
        </g>
        <g id="路径-4备份" transform="translate(5.306274, 187.248123) scale(-1, -1) translate(-5.306274, -187.248123) ">
          <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
          <use fill="#F8F661" fill-rule="evenodd" xlink:href="#path-9"></use>
        </g>
      </g>
    </svg>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, watch } from 'vue';

export default defineComponent({
  props: {
    num: {
      type: Number as PropType<number>,
      required: false,
      default: 0,
    },
  },
  setup(props) {
    const h = 80; // 数字卡片容器高度
    const list = ref([
      {
        num: 0,
        top: 0,
      },
      {
        num: 1,
        top: h,
      },
      {
        num: 2,
        top: h,
      },
      {
        num: 3,
        top: h,
      },
      {
        num: 4,
        top: h,
      },
      {
        num: 5,
        top: h,
      },
      {
        num: 6,
        top: h,
      },
      {
        num: 7,
        top: h,
      },
      {
        num: 8,
        top: h,
      },
      {
        num: 9,
        top: h,
      },
    ]);
    const duration = 140;
    let index = 0;
    let endIndex = 0;
    let startTime: number | null = null;
    let increase = false;
    const runFlop = () => {
      startTime = null;
      if (increase) {
        list.value[index + 1].top = h;
      } else {
        list.value[index - 1].top = -h;
      }
      window.requestAnimationFrame(animate);
    };
    // 帧动画
    const animate = (timestamp: number) => {
      if (!startTime) startTime = timestamp;
      const progress = timestamp - startTime;
      if (increase) {
        const prevEnd = -h * (progress / duration);
        const nextEnd = -h * (progress / duration) + h;
        list.value[index].top = prevEnd < -h ? -h : prevEnd;
        list.value[index + 1].top = nextEnd < 0 ? 0 : nextEnd;
      } else {
        const prevEnd = h * (progress / duration);
        const nextEnd = h * (progress / duration) - h;
        list.value[index].top = prevEnd > h ? h : prevEnd;
        list.value[index - 1].top = nextEnd > 0 ? 0 : nextEnd;
      }

      if (progress < duration) {
        window.requestAnimationFrame(animate);
      } else {
        if (increase) {
          index++;
        } else {
          index--;
        }

        if (index !== endIndex) {
          runFlop();
        } else {
          return; // stop;
        }
      }
    };

    watch(
      () => props.num,
      (val) => {
        setTimeout(() => {
          if (typeof val === 'number' && val >= 0 && val <= 9 && val !== index) {
            endIndex = val;
            increase = val > index;
            runFlop();
          }
        }, 500);
      },
      {
        immediate: true,
      },
    );

    return {
      list,
    };
  },
});
</script>

<style lang="less">
.ds-digital-flop2-front-flop-num {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 105px;

  .num-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    z-index: 1;
    left: 4px;
    top: 8px;
    overflow: hidden;
  }

  .num {
    position: absolute;
    background-image: linear-gradient(180deg, #ffffff 0%, #b5efff 100%);
    font-family: DIN Alternate;
    font-weight: 700;
    color: transparent;
    font-size: 90px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
  }
}
</style>
